<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="score >= 90">
				优秀
			</div>
			<div v-else-if="score >=60">
				良好
			</div>
			<div v-else>
				再接再厉
			</div>
			
			
			
			<!-- 另一种写法,我之前的写法是写一个data然后判断,这显然可以用计算属性 -->
			<div>{{result}}</div>
			
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					score: 90
				},
				computed:{
					result(){
						let showMessage = '';
						if(this.score >= 90){
							showMessage ="优秀"
						}else if(this.score >= 60){
							showMessage ="良好"
						}else{
							showMessage = "再接再厉"
						}
						return showMessage;
					}
				}
				
			})
		</script>
	</body>
</html>
